<template>
  <div>
        <el-tree
            :load='loadNode'
            lazy
            @node-click='getPid'
            :props='props'
            default-expand-all
            :expand-on-click-node="false"
            :render-content="renderContent"
        >
        </el-tree>
        <el-dialog
            :title='title'
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
        >
            <el-input v-model="adName"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
  </div>
</template>

<script>
export default {
    name:'ContentNav',
    data(){
        return{
            adName:'',
            dialogVisible:false,
            title:'添加广告',
            props:{
                label: 'name',
                children: '',
            },
            pid:'',
            id:''
        }
    },
    methods: {
        //获取Pid
        getPid(data){
            console.log(data)
            this.$emit('getid',data)
        },
        submit(){
            if(this.title=='添加广告'){
                //等会调用添加功能
                this.$api.getInsertContentCategory({
                    pid:this.pid,
                    name:this.adName
                }).then(data=>{
                    console.log(data)
                    if(data.status==200){
                        this.$message({
                            type:'success',
                            message:'添加成功'
                        })
                        this.dialogVisible=false;
                        //要进行页面强制刷新
                        this.$emit('reload')
                    }else{
                        this.$message({
                            type:'warning',
                            message:'添加失败'
                        })
                    }
                })
            }else{
                //等会调用修改功能
                this.$api.getUpdateContentCategory({
                    id:this.pid,
                    name:this.adName
                }).then(data=>{
                    console.log(data)
                    if(data.status==200){
                        this.$message({
                            type:'success',
                            message:'修改成功'
                        })
                        this.dialogVisible=false;
                        //要进行页面强制刷新
                        this.$emit('reload')
                    }else{
                        this.$message({
                            type:'warning',
                            message:'修改失败'
                        })
                    }
                })
            }
        },
        loadNode(node, resolve) {
            if (node.level === 0) {
                this.$api.getSelectContentCategoryByParentId({id:1})
                .then(data=>{
                    if(data.status==200){
                        return resolve(data.data)
                    }else{
                        return resolve([])
                    }
                })
            }else{
                this.$api.getSelectContentCategoryByParentId({id:node.data.pid})
                .then(data=>{
                    if(data.status==200){
                        return resolve(data.data)
                    }else{
                        return resolve([])
                    }
                })
            }
        },
        append(data) {
            this.title='添加广告';
            console.log(data);
            this.pid=data.pid
            this.dialogVisible=true;
        },

        remove(node,data) {
            this.$confirm('是否删除？删除后不可恢复！！！')
            .then(() => {
                console.log(node,data)
                this.$api.getDeleteContentCategoryById({
                    id:data.pid
                }).then(data=>{
                    console.log(data)
                    if(data.status==200){
                        this.$message({
                            type:'success',
                                message:'删除成功'
                        })
                        this.dialogVisible=false;
                        //要进行页面强制刷新
                        this.$emit('reload')
                    }else{
                        this.$message({
                            type:'warning',
                            message:'删除失败'
                        })
                    }
                })
            })
            .catch(() => {
                this.$message({
                    type:'info',
                    message:'已取消删除'
                })
            });
            
        },
        update(node,data){
            this.title='修改广告'
            console.log(node,data)
            this.dialogVisible=true;
            this.pid=data.pid
        },

        renderContent(h, { node, data}) {
            return (
              <span class="custom-tree-node">
                <span>{node.label}</span>
                <span>
                  <el-button size="mini" type="text" on-click={ () => this.append(data) }>添加</el-button>
                  <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
                  <el-button size="mini" type="text" on-click={ () => this.update(node, data) }>修改</el-button>
                </span>
              </span>);
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(() => {
                done();

            })
            .catch(error => {
                console.log(error)
            });
        }
    }
}
</script>

<style>

</style>